<template>
  <div class="container transac-monitor-list pb70">
    <p class="bread">
      <a href="#/">首页</a> >
      <a href="#/transac-monitor-list" class="font-s-18">交易监控服务</a>
    </p>
    <div class="fix">
      <div class="flo-left bg-c-fff container-left">
        <ul class="fix">
          <li class="cup" v-for="item in monitorList" @click="monitorSubmit(item.id)">
            <div class="img-box tc">
              <img src="../assets/day.png" alt="" class="db auto">
              <p>{{item.dueTime|dayFilter}}</p>
            </div>
            <div class="text-box tc">
              <p class="num">{{item.number | numFilter}}</p>
              <p class="money">{{item.charge | moneyFilter}}</p>
              <p class="name rel">{{item.name}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="flo-right bg-c-fff container-right">
        <h3 class="font-c-013">交易监控服务</h3>
        <div class="explain">
          <div class="box">
            信宝在创立之初就将守护企业交易安全作为主要业务方向，秉持防微杜渐、风险先控和未病先医的服务理念，依托服务模式和信用管理技术创新，利用互联网和大数据技术，自主开发了全国首套“交易风险监控系统”并上线运营。用户涵盖了互联网金融、房地产、产业园区、创业园区、企业服务等多个行业，获得了用户的一致好评。交易监控服务通过分析交易相对方的资质，对交易合同进行审查修改，对交易中产生的证据进行实时分析和留存，根据交易合同及时给予用户交易建议，在线全程把控交易过程，实现交易风险识别与预警，最大限度的减少交易双方的违约意愿和风险，切实守护用户的交易安全，致力于让客户享受到安全、便捷、负责任的服务。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      monitorList: []
    }
  },
  mounted() {
    this.$http.get('/transactionMonitor/read/list', {
      params: {}
    }).then((data) => {
      if (data.data.httpCode === 200) {
        this.monitorList = data.data.rows
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  methods: {
    monitorSubmit(id) {
      if (!this.$store.state.isLogin) {
        this.$toasted.show('请先登录')
        return
      }
      if (this.$store.state.userInfo.memberBusniess.isReviewed === -1) {
        this.$toasted.show('请到个人中心提交企业审核信息')
        return
      }
      if (this.$store.state.userInfo.memberBusniess.isReviewed === 0) {
        this.$toasted.show('您的信息正在审核中，请等待')
        return
      }
      if (this.$store.state.userInfo.memberBusniess.isReviewed === 2) {
        this.$toasted.show('您的企业信息已拒绝，请重新提交')
        return
      }
      this.$router.push('/transac-monitor-submit' + '?id=' + id)
    }
  },
  filters: {
    moneyFilter(money) {
      return '￥' + (money / 100).toFixed(2) + '元'
    },
    dayFilter(day) {
      if (day <= 0) {
        return '不限时间'
      } else {
        return day + '天'
      }
    },
    numFilter(number) {
      if (number <= 0) {
        return '不限次数'
      } else {
        return number + '次'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.container-left {
  width: 950px;
  margin-right: 20px;
  padding: 15px 50px 35px 50px;
}

.container-left ul {
  margin: 0 -11px;
}

.container-left li {
  float: left;
  margin: 0 9px;
  width: 200px;
  border: 1px solid #d8e7ff;
  border-radius: 5px;
  margin-bottom: 23px;
}

.container-left li .img-box {
  background-color: #d8e7ff;
  padding-top: 22px;
}

.container-left li .img-box p {
  line-height: 30px;
  color: #01378c;
  font-size: 20px;
  padding-top: 7px;
}

.container-left li .text-box {
  font-size: 12px;
  padding-top: 20px;
}

.container-left li .text-box .num {
  color: #01378c;
  line-height: 12px;
}

.container-left li .text-box .money {
  color: #ec1818;
  font-size: 18px;
  line-height: 42px;
}

.container-left li .text-box .name {
  color: #a5a5a5;
  line-height: 27px;
}

.container-left li .text-box .name::before {
  content: "";
  width: 70%;
  height: 1px;
  background-color: #ccd7e8;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -35%;
}

.container-right {
  width: 230px;
}

.container-right h3 {
  font-size: 18px;
  line-height: 60px;
  padding-left: 20px;
}

.explain {
  background: url(../assets/lv_03.png) center bottom no-repeat;
  color: #818181;
  height: 839px;
}

.explain div {
  padding: 0 20px;
  font-size: 12px;
  line-height: 22px;
}

</style>
